<template>
  <div>
    <ul class="nav" ref="navHeight">
      <li is="ListItem"
          :item="item"
          :index="index"
          v-for="(item,index) in list"
          :class="{active:current === index}"
          @changeCurrent="onChangeCurrent">
      </li>
    </ul>
    <!--翻页-->
    <div class="pager">
      <el-pagination
        ref="pages"
        @current-change="handleCurrentChange"
        layout="prev,pager,next"
        :page-size="pageSize"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import http from "axios"
  import ListItem from '@/components/List/ListItem'
  import bus from "@/bus";

  export default {
    name: "List",
    components:{ListItem},
    data() {
      return {
        list: [],
        tabs: [],
        fileNumber: "",
        current: "",
        links: {},
        pageSize: 0,
        total: 0
      }
    },
    mounted() {
      this.$refs.navHeight.style.height=screen.availHeight - 220 + "px";
      this.pageSize = 15;
      this.getCurrentPage("https://api.github.com/gists?page=1&per_page=" + this.pageSize, function () {
        if(this.links.hasOwnProperty("last")){
          var pageArr = this.links.last.match(/.+page=(\d+)&.+/);
          this.total = this.pageSize * parseInt(pageArr[1]);
        }
        bus.$on("deletePageGist",(id) => {
          this.list = this.list.filter((val) => val.id !== id);
        });
        bus.$on('updateList',obj=>{
          this.list.forEach(item=> {
            if(item.id === obj.id){
              item.description = obj.description;
              item.files = obj.files;
            }
          })
        });
        bus.$on("addListGist",(obj)=>{
          this.list.unshift({
            id:obj.id,
            description: obj.description
          });
        });
      });
    },
    methods: {
      getCurrentPage(url, funct){
        http.get(url, {
          headers: {
            "Authorization": "token " + localStorage.getItem("token")
          }
        }).then((r) => {
          this.list = r.data;
          var _self = this;
          var dataLinks= r.headers.link;
          if(dataLinks){
            dataLinks.split(",").forEach(function (val) {
              var href = val.match(/<(.+)>; rel="(.+)"/);
              _self.$set(_self.links, href[2], href[1]);
            });
          } else {
            this.pageSize = this.list.length;
          }
//          this.$router.push({ path: '/gists/gist', query: { id: this.list[0].id }});
          if (typeof funct === "function") {
            funct.call(_self);
          }
        })
          .catch();
      },
      handleCurrentChange(index){
        this.current="";
        bus.$emit("hideGistDetails");
        var strUrl = "https://api.github.com/gists?page=num&per_page=" + this.pageSize;
        this.getCurrentPage(strUrl.replace(/num/, index));
      },
      onChangeCurrent(index){
        this.current = index;
        bus.$emit("showDetails");
      }
    }
  }
</script>
<style>
  .nav {
    text-align: left;
    padding-left: 0;
    overflow-x: hidden;
  }
  .nav a {
    color: #333;
  }
  .nav li {
    padding: 8px 20px;
    margin: 10px 0;
    line-height: 20px;
    position: relative;
  }
  .nav li a{
    width:90%;
    color:#333;
    display: inline-block;
  }
  .nav li:hover,
  .nav li.active {
    background-color: #d7d7d7;
  }
  .pager{
    text-align: center;
  }
  .el-pagination button:disabled,
  .el-pager li,
  .el-pagination .btn-next,
  .el-pagination .btn-prev{
    background-color:#ececec;
  }
</style>
